<template>
  <div>
    <!-- 添加分享内容 -->
    <div class="campus-skills-form">
      <el-form v-model="skillsForm" :inline="true" label-width="120px">
        <el-form-item label="分享内容" prop="content">
          <el-input
            type="textarea"
            rows="3"
            v-model="skillsForm.content"
            placeholder="快快分享你的经验吧"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型选择" prop="type">
          <el-radio-group v-model="skillsForm.types">
            <el-radio label="简历"></el-radio>
            <el-radio label="面试"></el-radio>
            <el-radio label="笔试"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            plain
            type="warning"
            size="mini"
            style="padding-left: -15px"
            icon="el-icon-share"
            @click="share"
            >分享</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 分割线 -->
    <div>
      <el-divider><i class="el-icon-share"></i></el-divider>
    </div>
    <div class="campus-interviewskills-card">
      <el-card class="box-card" v-for="item in list" :key="item.sid">
        <div slot="header" class="clearfix">
          <span>{{ item.types }}</span>
          <el-button
            style="float: right"
            type="text"
            @click="handleDelete(item.sid)"
            >删除</el-button
          >
          <el-badge
            :value="item.likes"
            style="float: right; padding: 3px 0; color: red"
            class="item"
          >
            <el-button
              size="small"
              style="float: right; padding: 3px 0; color: red"
              >点赞数</el-button
            >
          </el-badge>
        </div>
        <div class="text">
          <el-input
            type="textarea"
            :readonly="true"
            v-model="item.content"
          ></el-input>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommendInterviewskills",

  data() {
    return {
      list: [],
      skillsForm: {
        content: "",
        types: "",
      },
      deleteObj: {
        sid: 0,
      },
    };
  },

  mounted() {
    this.loadList();
  },

  methods: {
    // 加载数据
    loadList() {
      this.$axios
        .post("/shares/queryByHid")
        .then((res) => {
          if (res.data.result != null) {
            this.list = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误",
            type: "error",
          });
        });
    },
    // 分享
    share() {
      if (this.skillsForm.content === "") {
        this.$message({
          message: "输入框为空",
          type: "error",
        });
        return;
      }
      if (this.skillsForm.types === "") {
        this.$message({
          message: "请选择对应的类型",
          type: "error",
        });
        return;
      }
      this.$axios
        .post("/shares/share", this.skillsForm)
        .then((res) => {
          var response = res.data.desc;
          if (response === "分享失败") {
            this.$message({
              message: "分享失败",
              type: "error",
            });
            return;
          } else if (response === "已经分享") {
            this.$message({
              message: "已经分享过啦",
              type: "error",
            });
            return;
          } else if (response === "分享成功") {
            this.$message({
              message: "分享成功",
              type: "success",
            });
            this.loadList();
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 删除方法
    handleDelete(val) {
      this.deleteObj.sid = val;
      this.$axios
        .post("/shares/delete", this.deleteObj)
        .then((res) => {
          var response = res.data.desc;
          if (response === "删除失败") {
            this.$message({
              message: "删除失败",
              type: "error",
            });
            return;
          } else if (response === "删除成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.loadList();
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
  },

  watch: {
    count: function (newVal) {
      if (newVal >= 3) {
        this.$message({
          message: "不能分享重复的哦",
          type: "error",
        });
      }
    },
  },
  computed: {},
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 560px;
  height: 160px;
  margin-right: 12px;
  margin-bottom: 10px;
}

.campus-interviewskills-card {
  display: flex;
  flex-wrap: wrap;
  margin-left: 15px;
}

.campus-skills-form {
  margin-top: 30px;
  margin-bottom: -30px;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
